import React, {useState, useEffect} from 'react'
import { NavLink } from 'react-router-dom';

export default function EffectFn() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Tom');
  // useEffect,这个函数的作用是在函数组件中引入componentDidMount和componentDidUpdate以及componentWillUnmount这三个函数
  // useEffect有两个参数，第一个是必填项，是一个回调函数，在数据变化时执行
  // 第二个参数是选填的，控制依赖项，是一个数组。可以不填，可以为空数组，可以是有内容的
  useEffect(()=>{
    document.title = `点击次数：${count}`
    console.log('我执行了...');
    // 第一个参数的最后，加上return，会在组件销毁时执行
    return ()=>{
      console.log('我销毁了...');
    }
  }, [count])
  // 1.第二个参数不填：初始化+更新期
  // 2.第二个参数是空数组：初始化
  // 3.第二个参数有内容:初始化+(数组中的内容变化时才会执行)更新期
  return (
    <div>
      <p>点击次数：{count}</p>
      <button onClick={()=>setCount(count+1)}>click</button>
      <p>点击次数：{name}</p>
      <button onClick={()=>setName('Jack')}>改名</button>
      <NavLink to="/effectclass">effectclass</NavLink>
    </div>
  )
}
